<template>
  <div class="exercise-plan-container">
    <!-- 页面标题 -->
    <Card shadow style="margin-bottom: 20px;">
      <Row type="flex" justify="space-between" align="middle">
        <i-col span="12">
          <h2 style="margin: 0;">运动计划管理</h2>
        </i-col>
        <i-col span="12" style="text-align: right;">
          <Button type="primary" @click="showCreateModal">新增计划</Button>
        </i-col>
      </Row>
    </Card>

    <!-- 筛选条件 -->
    <Card shadow style="margin-bottom: 20px;">
      <Row :gutter="20">
        <i-col :xs="24" :sm="12" :md="6">
          <label style="display: block; margin-bottom: 5px; font-weight: bold;">运动类型</label>
          <Select v-model="filterType" clearable placeholder="请选择运动类型">
            <Option value="running">跑步</Option>
            <Option value="cycling">骑行</Option>
            <Option value="swimming">游泳</Option>
            <Option value="walking">散步</Option>
            <Option value="yoga">瑜伽</Option>
            <Option value="gym">健身房</Option>
            <Option value="other">其他</Option>
          </Select>
        </i-col>
        <i-col :xs="24" :sm="12" :md="6">
          <label style="display: block; margin-bottom: 5px; font-weight: bold;">计划状态</label>
          <Select v-model="filterStatus" clearable placeholder="请选择状态">
            <Option value="active">进行中</Option>
            <Option value="completed">已完成</Option>
            <Option value="pending">未开始</Option>
            <Option value="canceled">已取消</Option>
          </Select>
        </i-col>
        <i-col :xs="24" :sm="12" :md="6">
          <label style="display: block; margin-bottom: 5px; font-weight: bold;">开始日期</label>
          <DatePicker
            v-model="filterStartDate"
            type="date"
            placeholder="选择开始日期"
            style="width: 100%;"
          ></DatePicker>
        </i-col>
        <i-col :xs="24" :sm="12" :md="6">
          <label style="display: block; margin-bottom: 5px; font-weight: bold;">操作</label>
          <Button style="width: 100%; margin-right: 5px;" @click="searchPlans">查询</Button>
          <Button style="width: 100%;" @click="resetFilter">重置</Button>
        </i-col>
      </Row>
    </Card>

    <!-- 运动计划列表 -->
    <Card shadow>
      <Spin size="large" fix v-if="loading"></Spin>
      <div v-if="planList.length > 0" class="plan-list">
        <Row :gutter="20">
          <i-col :xs="24" :sm="12" :md="8" v-for="plan in planList" :key="plan.id" style="margin-bottom: 20px;">
            <Card class="plan-card" :class="`plan-card-${plan.status}`" shadow>
              <!-- 运动类型标签 -->
              <div class="plan-header">
                <Tag :color="getExerciseTypeColor(plan.exerciseType)" style="margin-bottom: 10px;">
                  {{ getExerciseTypeName(plan.exerciseType) }}
                </Tag>
                <Tag :color="getStatusColor(plan.status)" style="margin-left: 8px;">
                  {{ getStatusName(plan.status) }}
                </Tag>
              </div>

              <!-- 计划名称 -->
              <h3 style="margin: 10px 0; color: #333;">{{ plan.name }}</h3>

              <!-- 计划详情 -->
              <div class="plan-details">
                <!-- 时间信息 -->
                <div class="detail-item">
                  <Icon type="md-clock" size="16"></Icon>
                  <span class="label">开始时间：</span>
                  <span class="value">{{ formatDate(plan.startDate) }}</span>
                </div>

                <div class="detail-item">
                  <Icon type="md-clock" size="16"></Icon>
                  <span class="label">结束时间：</span>
                  <span class="value">{{ formatDate(plan.endDate) }}</span>
                </div>

                <!-- 运动类型 -->
                <div class="detail-item">
                  <Icon type="md-fitness" size="16"></Icon>
                  <span class="label">运动类型：</span>
                  <span class="value">{{ getExerciseTypeName(plan.exerciseType) }}</span>
                </div>

                <!-- 时长 -->
                <div class="detail-item">
                  <Icon type="md-time" size="16"></Icon>
                  <span class="label">计划时长：</span>
                  <span class="value">{{ plan.duration }}分钟</span>
                </div>

                <!-- 频率 -->
                <div class="detail-item">
                  <Icon type="md-repeat" size="16"></Icon>
                  <span class="label">周期频率：</span>
                  <span class="value">{{ plan.frequency }}/周</span>
                </div>

                <!-- 描述 -->
                <div class="detail-item" v-if="plan.description">
                  <Icon type="md-document" size="16"></Icon>
                  <span class="label">描述：</span>
                  <span class="value">{{ truncateText(plan.description, 50) }}</span>
                </div>

                <!-- 进度 -->
                <div class="detail-item" style="margin-top: 10px;">
                  <span class="label">完成度：</span>
                  <Progress :percent="plan.progress" style="width: 100%; margin-top: 5px;"></Progress>
                </div>

                <!-- 提醒时间 -->
                <div class="detail-item" v-if="plan.enableReminder && plan.reminderTime" style="margin-top: 10px;">
                  <Icon type="md-notifications" size="16" style="color: #2d8cf0;"></Icon>
                  <span class="label">提醒时间：</span>
                  <span class="value" style="color: #2d8cf0;">{{ plan.reminderTime }}</span>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="plan-actions" style="margin-top: 15px; padding-top: 10px; border-top: 1px solid #eee;">
                <Button type="primary" size="small" @click="editPlan(plan)" style="margin-right: 5px;">编辑</Button>
                <Button type="info" size="small" @click="viewDetail(plan)" style="margin-right: 5px;">详情</Button>
                <Button type="error" size="small" @click="deletePlan(plan.id)">删除</Button>
              </div>
            </Card>
          </i-col>
        </Row>
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <img src="@/assets/images/error-page/empty.png" style="width: 100px; opacity: 0.5; margin-bottom: 15px;" alt="暂无数据"/>
        <p style="color: #999; font-size: 14px;">暂无运动计划，快来创建一个吧！</p>
      </div>
    </Card>

    <!-- 创建/编辑模态框 -->
    <Modal
      v-model="modalVisible"
      :title="isEdit ? '编辑运动计划' : '创建运动计划'"
      @on-ok="submitPlan"
      @on-cancel="resetModal"
      width="600"
    >
      <Form ref="planForm" :model="formData" :rules="formRules" :label-width="100">
        <FormItem label="计划名称" prop="name">
          <Input
            v-model="formData.name"
            placeholder="请输入计划名称"
            maxlength="50"
          ></Input>
        </FormItem>

        <FormItem label="运动类型" prop="exerciseType">
          <Select v-model="formData.exerciseType" placeholder="请选择运动类型">
            <Option value="running">跑步</Option>
            <Option value="cycling">骑行</Option>
            <Option value="swimming">游泳</Option>
            <Option value="walking">散步</Option>
            <Option value="yoga">瑜伽</Option>
            <Option value="gym">健身房</Option>
            <Option value="other">其他</Option>
          </Select>
        </FormItem>

        <FormItem label="开始日期" prop="startDate">
          <DatePicker
            v-model="formData.startDate"
            type="datetime"
            placeholder="选择开始日期和时间"
            style="width: 100%;"
          ></DatePicker>
        </FormItem>

        <FormItem label="结束日期" prop="endDate">
          <DatePicker
            v-model="formData.endDate"
            type="datetime"
            placeholder="选择结束日期和时间"
            style="width: 100%;"
          ></DatePicker>
        </FormItem>

        <FormItem label="时长(分钟)" prop="duration">
          <Input-Number
            v-model="formData.duration"
            :min="1"
            :max="1000"
            placeholder="请输入运动时长"
          ></Input-Number>
        </FormItem>

        <FormItem label="周期频率" prop="frequency">
          <Input-Number
            v-model="formData.frequency"
            :min="1"
            :max="7"
            placeholder="请输入每周运动频率"
          ></Input-Number>
        </FormItem>

        <FormItem label="计划状态" prop="status">
          <Select v-model="formData.status" placeholder="请选择计划状态">
            <Option value="active">进行中</Option>
            <Option value="completed">已完成</Option>
            <Option value="pending">未开始</Option>
            <Option value="canceled">已取消</Option>
          </Select>
        </FormItem>

        <FormItem label="完成度" prop="progress">
          <Slider
            v-model="formData.progress"
            :min="0"
            :max="100"
            :step="10"
            range
            :tip-format="formatProgress"
          ></Slider>
        </FormItem>

        <FormItem label="计划描述" prop="description">
          <Input
            v-model="formData.description"
            type="textarea"
            :rows="4"
            placeholder="请输入计划描述"
            maxlength="200"
          ></Input>
        </FormItem>

        <FormItem label="提醒时间" prop="reminderTime">
          <TimePicker
            v-model="formData.reminderTime"
            format="HH:mm"
            placeholder="选择提醒时间"
            style="width: 100%;"
          ></TimePicker>
        </FormItem>

        <FormItem label="启用提醒">
          <i-switch v-model="formData.enableReminder"></i-switch>
          <span style="margin-left: 10px;">{{ formData.enableReminder ? '已启用' : '已禁用' }}</span>
        </FormItem>
      </Form>
    </Modal>

    <!-- 详情模态框 -->
    <Modal
      v-model="detailModalVisible"
      title="运动计划详情"
      @on-cancel="detailModalVisible = false"
      width="600"
    >
      <div v-if="currentPlan" class="detail-modal">
        <Row :gutter="20" style="margin-bottom: 15px;">
          <i-col span="24">
            <strong>计划名称：</strong>
            <span>{{ currentPlan.name }}</span>
          </i-col>
        </Row>
        <Row :gutter="20" style="margin-bottom: 15px;">
          <i-col :xs="24" :sm="12">
            <strong>运动类型：</strong>
            <Tag :color="getExerciseTypeColor(currentPlan.exerciseType)">
              {{ getExerciseTypeName(currentPlan.exerciseType) }}
            </Tag>
          </i-col>
          <i-col :xs="24" :sm="12">
            <strong>计划状态：</strong>
            <Tag :color="getStatusColor(currentPlan.status)">
              {{ getStatusName(currentPlan.status) }}
            </Tag>
          </i-col>
        </Row>
        <Row :gutter="20" style="margin-bottom: 15px;">
          <i-col :xs="24" :sm="12">
            <strong>开始时间：</strong>
            <span>{{ formatDate(currentPlan.startDate) }}</span>
          </i-col>
          <i-col :xs="24" :sm="12">
            <strong>结束时间：</strong>
            <span>{{ formatDate(currentPlan.endDate) }}</span>
          </i-col>
        </Row>
        <Row :gutter="20" style="margin-bottom: 15px;">
          <i-col :xs="24" :sm="12">
            <strong>计划时长：</strong>
            <span>{{ currentPlan.duration }}分钟</span>
          </i-col>
          <i-col :xs="24" :sm="12">
            <strong>周期频率：</strong>
            <span>{{ currentPlan.frequency }}/周</span>
          </i-col>
        </Row>
        <Row :gutter="20" style="margin-bottom: 15px;">
          <i-col span="24">
            <strong>完成度：</strong>
            <Progress :percent="currentPlan.progress"></Progress>
          </i-col>
        </Row>
        <Row :gutter="20" v-if="currentPlan.description">
          <i-col span="24">
            <strong>计划描述：</strong>
            <p style="margin-top: 5px; padding: 8px; background: #f5f5f5; border-radius: 4px;">
              {{ currentPlan.description }}
            </p>
          </i-col>
        </Row>
      </div>
    </Modal>

    <!-- 运动提醒弹窗 -->
    <Modal
      v-model="reminderModalVisible"
      title="运动提醒"
      @on-ok="dismissReminder"
      @on-cancel="dismissReminder"
      width="500"
    >
      <div class="reminder-content">
        <Alert type="warning" style="margin-bottom: 15px;">
          <p>{{ reminderMessage }}</p>
        </Alert>
        <div v-if="currentReminderPlan" class="reminder-plan-info">
          <h4>运动计划详情：</h4>
          <Row :gutter="20" style="margin-top: 10px;">
            <i-col :xs="24" :sm="12">
              <strong>计划名称：</strong>
              <span>{{ currentReminderPlan.name }}</span>
            </i-col>
            <i-col :xs="24" :sm="12">
              <strong>运动类型：</strong>
              <span>{{ getExerciseTypeName(currentReminderPlan.exerciseType) }}</span>
            </i-col>
            <i-col :xs="24" :sm="12">
              <strong>计划时长：</strong>
              <span>{{ currentReminderPlan.duration }}分钟</span>
            </i-col>
            <i-col :xs="24" :sm="12">
              <strong>周期频率：</strong>
              <span>{{ currentReminderPlan.frequency }}/周</span>
            </i-col>
            <i-col :xs="24" :sm="12">
              <strong>状态：</strong>
              <Tag :color="getStatusColor(currentReminderPlan.status)">
                {{ getStatusName(currentReminderPlan.status) }}
              </Tag>
            </i-col>
            <i-col :xs="24" :sm="12">
              <strong>完成度：</strong>
              <span>{{ currentReminderPlan.progress }}%</span>
            </i-col>
            <i-col v-if="currentReminderPlan.description" :xs="24">
              <strong>计划描述：</strong>
              <span>{{ currentReminderPlan.description }}</span>
            </i-col>
          </Row>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getExercisePlans, createExercisePlan, updateExercisePlan, deleteExercisePlan } from '@/api/plan'
import reminderManager from '@/libs/reminder-manager'
import notificationService from '@/libs/notification-service'

export default {
  name: 'ExercisePlan',
  data () {
    const validateDateRange = (rule, value, callback) => {
      if (!this.formData.startDate || !value) {
        callback()
      } else if (value <= this.formData.startDate) {
        callback(new Error('结束日期必须晚于开始日期'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      planList: [],
      filterType: '',
      filterStatus: '',
      filterStartDate: '',
      modalVisible: false,
      detailModalVisible: false,
      reminderModalVisible: false,
      isEdit: false,
      currentPlan: null,
      currentPlanId: null,
      reminderMessage: '',
      currentReminderPlan: null,
      formData: {
        name: '',
        exerciseType: '',
        startDate: '',
        endDate: '',
        duration: 60,
        frequency: 3,
        status: 'pending',
        progress: 0,
        description: '',
        reminderTime: '',
        enableReminder: true
      },
      formRules: {
        name: [
          { required: true, message: '请输入计划名称', trigger: 'blur' },
          { min: 2, max: 50, message: '计划名称长度应在2-50之间', trigger: 'blur' }
        ],
        exerciseType: [
          { required: true, message: '请选择运动类型', trigger: 'change' }
        ],
        startDate: [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请选择结束日期', trigger: 'change' },
          { validator: validateDateRange, trigger: 'change' }
        ],
        duration: [
          { required: true, message: '请输入运动时长', trigger: 'blur' },
          { type: 'number', min: 1, message: '时长应大于0', trigger: 'blur' }
        ],
        frequency: [
          { required: true, message: '请输入周期频率', trigger: 'blur' },
          { type: 'number', min: 1, max: 7, message: '频率应在1-7之间', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择计划状态', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    this.loadPlans()
    this.initReminders()
  },
  beforeDestroy () {
    // 清理所有定时器
    reminderManager.clearAllReminders()
  },
  methods: {
    loadPlans () {
      this.loading = true
      // 模拟获取数据，实际使用API
      setTimeout(() => {
        this.planList = [
          {
            id: 1,
            name: '每日晨跑计划',
            exerciseType: 'running',
            startDate: new Date(2025, 10, 22),
            endDate: new Date(2025, 11, 22),
            duration: 30,
            frequency: 5,
            status: 'active',
            progress: 60,
            description: '坚持每天早晨跑步30分钟，提高心肺功能',
            reminderTime: '06:30',
            enableReminder: true
          },
          {
            id: 2,
            name: '周末骑行活动',
            exerciseType: 'cycling',
            startDate: new Date(2025, 10, 23),
            endDate: new Date(2025, 11, 23),
            duration: 90,
            frequency: 2,
            status: 'active',
            progress: 40,
            description: '周末进行长距离骑行，增强耐力',
            reminderTime: '08:00',
            enableReminder: true
          },
          {
            id: 3,
            name: '游泳训练计划',
            exerciseType: 'swimming',
            startDate: new Date(2025, 10, 20),
            endDate: new Date(2025, 11, 20),
            duration: 45,
            frequency: 3,
            status: 'active',
            progress: 75,
            description: '每周三次游泳训练，提高游泳技能',
            reminderTime: '19:00',
            enableReminder: true
          },
          {
            id: 4,
            name: '瑜伽放松课程',
            exerciseType: 'yoga',
            startDate: new Date(2025, 10, 15),
            endDate: new Date(2025, 11, 15),
            duration: 60,
            frequency: 4,
            status: 'completed',
            progress: 100,
            description: '通过瑜伽练习放松身心，改善柔韧性',
            reminderTime: '18:00',
            enableReminder: false
          },
          {
            id: 5,
            name: '健身房力量训练',
            exerciseType: 'gym',
            startDate: new Date(2025, 11, 1),
            endDate: new Date(2025, 11, 30),
            duration: 75,
            frequency: 4,
            status: 'pending',
            progress: 0,
            description: '专业力量训练，增强肌肉力量',
            reminderTime: '17:00',
            enableReminder: true
          }
        ]
        this.loading = false
        // 重新初始化提醒
        this.initReminders()
      }, 500)
    },
    initReminders () {
      // 初始化提醒管理器
      if (!reminderManager.callback) {
        reminderManager.init((plan) => {
          this.showPlanReminder(plan)
        })
      }
      
      // 设置所有启用提醒的运动计划
      const remindablePlans = this.planList.filter(p => p.enableReminder && p.reminderTime)
      reminderManager.setReminders(remindablePlans)
    },
    showPlanReminder (plan) {
      this.currentReminderPlan = plan
      this.reminderMessage = `亲爱的用户，现在是${this.getExerciseTypeName(plan.exerciseType)}训练时间，建议您完成${plan.name}！`
      this.reminderModalVisible = true

      // 同时发送站内信
      this.sendPlanReminderMessage(plan)

      // 自动弹窗持续时间 - 30秒后自动关闭
      setTimeout(() => {
        this.reminderModalVisible = false
      }, 30000)
    },
    dismissReminder () {
      this.reminderModalVisible = false
    },
    async sendPlanReminderMessage (plan) {
      // 发送站内信提醒
      const success = await notificationService.sendPlanReminder(
        `${this.getExerciseTypeName(plan.exerciseType)}计划提醒`,
        `现在是${this.getExerciseTypeName(plan.exerciseType)}时间！建议您完成：${plan.name}（${plan.duration}分钟，周期${plan.frequency}次/周）`,
        {
          planId: plan.id,
          planName: plan.name,
          exerciseType: plan.exerciseType,
          duration: plan.duration,
          frequency: plan.frequency,
          status: plan.status,
          progress: plan.progress
        }
      )
      
      if (success) {
        this.$Message.success('运动计划提醒消息已发送')
      } else {
        // 如果发送失败，将消息加入队列
        const message = {
          title: `${this.getExerciseTypeName(plan.exerciseType)}计划提醒`,
          content: `现在是${this.getExerciseTypeName(plan.exerciseType)}时间！建议您完成：${plan.name}（${plan.duration}分钟，周期${plan.frequency}次/周）`,
          type: 'exercise_reminder'
        }
        notificationService.queueMessage(message)
      }
    },
    editPlan (plan) {
      this.isEdit = true
      this.currentPlanId = plan.id
      this.formData = {
        name: plan.name,
        exerciseType: plan.exerciseType,
        startDate: plan.startDate,
        endDate: plan.endDate,
        duration: plan.duration,
        frequency: plan.frequency,
        status: plan.status,
        progress: plan.progress,
        description: plan.description,
        reminderTime: plan.reminderTime || '',
        enableReminder: plan.enableReminder !== undefined ? plan.enableReminder : true
      }
      this.modalVisible = true
    },
    submitPlan () {
      this.$refs.planForm.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            updateExercisePlan(this.currentPlanId, this.formData).then(() => {
              this.$Message.success('运动计划更新成功')
              this.modalVisible = false
              this.loadPlans()
              // 如果启用了提醒，重新设置提醒
              if (this.formData.enableReminder && this.formData.reminderTime) {
                const updatedPlan = { ...this.formData, id: this.currentPlanId }
                reminderManager.updateReminder(this.currentPlanId, updatedPlan)
              } else {
                reminderManager.clearReminder(this.currentPlanId)
              }
            }).catch(() => {
              this.$Message.error('运动计划更新失败')
            })
          } else {
            createExercisePlan(this.formData).then(() => {
              this.$Message.success('运动计划创建成功')
              this.modalVisible = false
              this.loadPlans()
              // 如果启用了提醒，设置提醒
              if (this.formData.enableReminder && this.formData.reminderTime) {
                const newPlan = { id: Math.random(), ...this.formData }
                reminderManager.setReminder(newPlan)
              }
            }).catch(() => {
              this.$Message.error('运动计划创建失败')
            })
          }
        }
      })
    },
    resetModal () {
      this.formData = {
        name: '',
        exerciseType: '',
        startDate: '',
        endDate: '',
        duration: 60,
        frequency: 3,
        status: 'pending',
        progress: 0,
        description: '',
        reminderTime: '',
        enableReminder: true
      }
      this.$refs.planForm && this.$refs.planForm.resetFields()
    },
    viewDetail (plan) {
      this.currentPlan = plan
      this.detailModalVisible = true
    },
    deletePlan (id) {
      this.$Modal.confirm({
        title: '删除运动计划',
        content: '确定要删除这个运动计划吗？此操作不可撤销。',
        okText: '删除',
        cancelText: '取消',
        onOk: () => {
          deleteExercisePlan(id).then(() => {
            this.$Message.success('运动计划删除成功')
            // 清除该计划的提醒
            reminderManager.clearReminder(id)
            this.loadPlans()
          }).catch(() => {
            this.$Message.error('运动计划删除失败')
          })
        }
      })
    },
    getExerciseTypeName (type) {
      const typeMap = {
        running: '跑步',
        cycling: '骑行',
        swimming: '游泳',
        walking: '散步',
        yoga: '瑜伽',
        gym: '健身房',
        other: '其他'
      }
      return typeMap[type] || type
    },
    getExerciseTypeColor (type) {
      const colorMap = {
        running: 'red',
        cycling: 'blue',
        swimming: 'cyan',
        walking: 'green',
        yoga: 'purple',
        gym: 'orange',
        other: 'default'
      }
      return colorMap[type] || 'default'
    },
    getStatusName (status) {
      const statusMap = {
        active: '进行中',
        completed: '已完成',
        pending: '未开始',
        canceled: '已取消'
      }
      return statusMap[status] || status
    },
    getStatusColor (status) {
      const colorMap = {
        active: 'blue',
        completed: 'green',
        pending: 'default',
        canceled: 'error'
      }
      return colorMap[status] || 'default'
    },
    formatDate (date) {
      if (!date) return '-'
      const d = new Date(date)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const hours = String(d.getHours()).padStart(2, '0')
      const minutes = String(d.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    formatProgress (value) {
      return `${value}%`
    },
    truncateText (text, length) {
      if (text.length > length) {
        return text.substring(0, length) + '...'
      }
      return text
    }
  }
}
</script>

<style scoped lang="less">
.exercise-plan-container {
  .plan-list {
    .plan-card {
      position: relative;
      transition: all 0.3s ease;
      height: 100%;
      
      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }

      &.plan-card-active {
        border-left: 4px solid #2d8cf0;
      }

      &.plan-card-completed {
        border-left: 4px solid #19be6b;
        opacity: 0.9;
      }

      &.plan-card-pending {
        border-left: 4px solid #ff9900;
      }

      &.plan-card-canceled {
        border-left: 4px solid #ed3f14;
        opacity: 0.7;
      }

      .plan-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }

      .plan-details {
        .detail-item {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          font-size: 12px;

          i {
            margin-right: 6px;
            color: #2d8cf0;
          }

          .label {
            color: #666;
            margin-right: 5px;
            min-width: 80px;
          }

          .value {
            color: #333;
            word-break: break-word;
            flex: 1;
          }
        }
      }

      .plan-actions {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        button {
          flex: 1;
          min-width: 60px;
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 40px 0;
  }

  .detail-modal {
    padding: 20px 0;

    strong {
      color: #333;
      min-width: 100px;
      display: inline-block;
    }

    span {
      color: #666;
    }
  }
}
</style>
